<template>
    <div>
        <div class="customeRow">
            <div class="nav">
                <router-link to="home">主页</router-link>
                / 品牌历史
            </div>
            <div class="title">{{article.article_title}}</div>
            <div class="customeLine"></div>
            <div class="blogContainer" v-html="article.article_content">
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {Row, Col, Message} from 'element-ui';
    import serve from '../util/serve';

    Vue.use(Row);
    Vue.use(Col);
    export default {
        name: 'Blog',
        components: {},
        inject: ['reload'],
        data: () => {
            return {
                article: {}
            }
        },
        props: {},
        metaInfo() {
            return serve.handleSetMeta('history','/history');
        },
        mounted() {
            const _this = this;
            window.scroll(0, 0);
            const loading = serve.doLoading();
            const article_id = '36';
            const params = {
                article_id,
            };
            const url = serve.handleGetUrl('getArticleDetail', params);
            serve.doPost(url, {id: article_id})
                .then((response) => {
                    loading.close();
                    const data = response.data;
                    if (data.code === 1) {
                        const detail = data.data.detail;
                        detail.article_content = serve.unescape(detail.article_content);
                        _this.article = detail;
                    } else {
                        Message({
                            message: data.msg || '请求错误',
                            type: 'error'
                        });
                    }
                }).catch(() => {
                loading.close();
            })
        },
        methods: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .blogContainer {
        padding-bottom: 50px;
    }
    .specialItemImg img {
        width: 100%;
        height: 100%;
    }
    .blogImg img {
        width: 100%;
    }


    @media screen and (max-width: 420px) {
        .blogContainer {
            padding: 0 10px;
        }
    }

    @media screen and (max-width: 768px) {
        .blogContainer p {
            width: 100%;
        }

        .blogContainer p img {
            width: 100% !important;
        }
    }
</style>
